<template>
	<div class="topic-body">
		<div class="list">
			<div class="item" v-for="(item,index) in list" :key="index" @click="handlerClick(item.id,index)">
				<div class="box-wrap" :style="'background:'+ item.colorLight" :class="[pointClassName(item.colorLight,item.points),item.isSecret ? 'secret':'']">
					<div class="name" v-show="item.isSecret">{{mySelf?item.tagName : item.categoryName  }}</div>
					<div class="name" v-show="!item.isSecret">{{item.tagName}}</div>
					<div class="time">{{item.clickTime}}</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			title: {
				type: String,
				default: () => {
					return '完成';
				}
			},
			list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			mySelf: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
		},
		filters: {

			
		},
		methods: {
			handlerClick(id,index) {
				this.$emit('click', {'id':id,'index':index});
			},
			pointClassName(color,val){
				var val = Math.abs(val) 
				if(val == 1 ){
					return 'box-1 '+ color
				}else if( val==2 ){
					return 'box-2 '+ color
				}else if( val==3 ){
					return 'box-3 '+ color
				}else if(val==4){
					return 'box-4 '+ color
				}else if(val==5){
					return 'box-5 '+ color
				}else if(val == 6){
					return 'box-6 '+ color
				}else if(val == 7){
					return 'box-7 '+ color
				}else if(val == 8){
					return 'box-8 '+ color
				}else if(val == 9){
					return 'box-9 '+ color
				}else if(val == 10){
					return 'box-10 '+ color
				}else if(val > 10){
					return 'box-10 '+ color
				}
			},
		}
	};
</script>

<style scoped lang="scss">
.topic-body {
	width: 100%;
	margin: 0 auto;
	// background: #F7F7F7;
	padding: 20rpx 0;
	box-sizing: border-box;
	.list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.item {
			width: 230rpx;
			height: 230rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.box-wrap {
				flex-direction: column;
				border-radius: 50%;
				background: #D10D28;
				color:#ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				min-width: 100rpx;
				min-height: 100rpx;
				.name,.time{
					font-size: 20rpx;
				}
			}
			.secret{
				// opacity: 0.78;
				background: #898989 !important;
				border: #898989;
			}
			// & .red{
			// 	background: #D10D28;
			// }
			// & .blue{
			// 	background: #3C73CE;
			// }
			// & .green{
			// 	background: #44C078;
			// }
			// & .yellow{
			// 	background: #DD831E;
			// }
			.box-1 {
				width: 112rpx;
				height: 112rpx;
				.name {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			
				.time {
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 28rpx;
				}
			
			}
			.box-2 {
				width: 116rpx;
				height: 116rpx;
				opacity: 0.97;
				.name {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			
				.time {
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 28rpx;
				}
			
			}
			.box-3 {
				width: 120rpx;
				height: 120rpx;
				opacity: 0.96;
				.name {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
				}

				.time {
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 28rpx;
				}

			}
			.box-4 {
				width: 158rpx;
				height: 158rpx;
				opacity: 0.95;
				.name {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			
				.time {
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 28rpx;
				}
			
			}
			.box-5 {
				width: 162rpx;
				height: 162rpx;
				opacity: 0.93;
				.name {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			
				.time {
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 28rpx;
				}
			
			}
			.box-6 {
				width: 170rpx;
				height: 170rpx;
				// opacity: 0.92;
				.name {
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			
				.time {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}
			.box-7 {
				width: 176rpx;
				height: 176rpx;
				opacity: 0.95;
				.name {
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 44rpx;
				}

				.time {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}
			.box-8 {
				width: 200rpx;
				height: 200rpx;
				opacity: 0.91;
				.name {
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			
				.time {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}

			.box-9{
				width: 210rpx;
				height: 210rpx;
				// opacity: 0.9;
				.name {
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 50rpx;
				}

				.time {
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}
			.box-10{
				width: 210rpx;
				height: 210rpx;
				opacity: 0.8;
				.name {
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 50rpx;
				}
			
				.time {
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}
		}
	}
}
</style>
